<template>
  <div>
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
      <div v-for='(val,index) in $store.state.routers.routers[0].children' :key="index">
        <el-menu-item :index="`${$store.state.routers.routers[0].path}/${val.path}`" v-if="!val.children && val.meta.isShow">
          <template slot="title">
            <span :class="`iconfont ${val.meta.icon}`"></span>
            <span slot="title"> {{val.meta.title}}</span>
          </template>
        </el-menu-item>
        <el-submenu :index="`${$store.state.routers.routers[0].path}/${val.path}`" v-if="val.children && val.meta.isShow">
          <template slot="title">
            <span :class="`iconfont ${val.meta.icon}`"></span>
            <span> {{val.meta.title}}</span>
          </template>
          <div v-for="(val2,index2) in val.children" :key="index2">
            <el-menu-item :index="`${$store.state.routers.routers[0].path}/${val.path}/${val2.path}`" v-if="val2.meta.isShow"><span :class="`iconfont ${val2.meta.icon}`"></span> {{val2.meta.title}}</el-menu-item>
          </div>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'MenuList',
};
</script>

